<template>

  <el-form ref="news" :model="news" style="padding-top: 20px;padding-left: 20px" label-width="80px">
    <el-form-item required="true" label="新闻标题">
      <el-col :span="11">
        <el-input v-model="news.title"></el-input>
      </el-col>
    </el-form-item>

    <el-form-item label="新闻图片">
      <el-upload
        action=""

        :on-preview="handlePictureCardPreview"
        :on-success="handleSuccess"
        :before-upload="handleBefore"
        :show-file-list="false"
        :on-remove="handleRemove">
        <i class="upload-demo"></i>
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
      <div v-show="openImg">
        <img style="height:200px;width: 200px" :src="dialogImageUrl"/>
      </div>
    </el-form-item>
    <el-form-item required="true" label="新闻时间">
      <el-date-picker clearable size="small" style="width: 200px"
                      v-model="news.newsTime"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择新闻时间">
      </el-date-picker>
    </el-form-item>
    <div class="app-container">
      新闻详情
      <mavon-editor ref="md" v-model="newsInfo" :style="'height:' + height" @imgAdd="imgAdd" />
    </div>
    <el-form-item>
      <el-button type="primary" @click="submitForm">立即添加</el-button>
      <el-button @click="closeAdd">取消</el-button>
    </el-form-item>
  </el-form>


</template>

<script>
  //import { upload } from '@/utils/upload'
  import { mapGetters } from 'vuex'
  import {  addNews, updateNews,getNews } from "@/api/news/news";
  import { uploadImg } from "@/api/system/user";
  export default {
    name: 'addNews',
    data() {
      return {
        height: document.documentElement.clientHeight - 200 + 'px',
        dialogImageUrl: '',
        dialogVisible: false,
        newsInfo:'',
        openImg:false,
        news: {
          id:'',
          title: '',
          img: '',
          newsTime: '',
          newsText: ''
        }
      }
    },
    mounted () {
      var id = this.$route.query.id;
      if(id != "" && id != undefined){
        this.getNewsById(id);
      }
    },

    methods: {
      handleRemove(file, fileList) {

      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleSuccess(response, file, fileList){
        this.dialogImageUrl = file.url;
      },
      handleBefore(file){
        let formData = new FormData();
        formData.append("avatarfile", file);
        uploadImg(formData).then((response) => {
          if (response.code === 200) {
            this.openImg = true;
            this.dialogImageUrl = process.env.VUE_APP_BASE_API + response.imgUrl;
            this.msgSuccess("上传成功");
          } else {
            this.msgError(response.msg);
          }

        });

      },
      /** 提交按钮 */
      submitForm: function() {
        this.news.img = this.dialogImageUrl;
        this.news.newsText = this.$refs.md.d_render;
        this.news.content = this.$refs.md.d_value;
        if(this.news.title == ""){
          this.msgSuccess("请输入新闻标题");
          return;
        }
        if(this.news.newsTime == ""){
          this.msgSuccess("请选择新闻时间");
          return;
        }
        if(this.news.id != ""){
          updateNews(this.news).then(response => {
            if (response.code === 200) {
              this.msgSuccess("修改成功");
              this.$router.push('/news/index');
            } else {
              this.msgError(response.msg);
            }
          });
        }else{
          addNews(this.news).then(response => {
            if (response.code === 200) {
              this.msgSuccess("新增成功");
              this.$router.push('/news/index');
            } else {
              this.msgError(response.msg);
            }
          });
        }

      },
      imgAdd(pos, $file) {
        let formData = new FormData();
        formData.append("avatarfile", $file);
        uploadImg(formData).then(data => {
          this.$refs.md.$img2Url(pos, process.env.VUE_APP_BASE_API + data.imgUrl)

        })
      },
      closeAdd(){
        this.$router.push('/news/index');
      },
      onSubmit() {
        //console.log(this.tDrugs);
      },
      getNewsById(id){
        getNews(id).then(response => {
          this.news = response.data;
          this.openImg = true;
          this.dialogImageUrl = response.data.img;
          this.$refs.md.d_render = response.data.newsText;
          if(response.data.content == '' || response.data.content == null){
            this.newsInfo = this.$refs.md.d_render;
          }else{
            this.$refs.md.d_value = response.data.content;
          }
          //this.tDrugs.content1 = this.$refs.md.d_value;
          //this.newsInfo = this.$refs.md.d_render;
        });
      }
    }
  }
</script>

<style scoped>
</style>
